<template>
  <view class="page">
    <!-- 头部 -->
    <!-- <view class="header">
      <text class="title">提交反馈</text>
      <text class="subtitle">帮助我们改进服务</text>
    </view> -->

    <!-- 表单 -->
    <view class="form">
      <!-- 反馈类型 -->
      <view class="form-group">
        <view class="label">反馈类型 <text class="required">*</text></view>
        <picker @change="onTypeChange" :value="typeIndex" :range="typeList" range-key="name">
          <view class="picker-item">
            {{ (typeList[typeIndex] && typeList[typeIndex].name) || '请选择反馈类型' }}
            <text class="arrow">›</text>
          </view>
        </picker>
      </view>

      <!-- 反馈内容 -->
      <view class="form-group">
        <view class="label">反馈内容 <text class="required">*</text></view>
        <textarea
          v-model="form.content"
          placeholder="请输入反馈内容（5-1000字）"
          placeholder-class="placeholder-text"
          class="textarea"
          :maxlength="1000"
          auto-height
        />
        <view class="char-count">{{ form.content.length }}/1000</view>
      </view>

      <!-- 图片上传：使用封装组件 -->
      <view class="form-group">
        <MultiImageUploader
          :images.sync="form.images"
          title="上传图片"
          tip="最多9张（选填）"
          :maxCount="9"
          :uploadUrl="uploadUrl"
          module="feedback"
        />
      </view>

      <!-- 联系方式 -->
      <view class="form-group">
        <view class="label">联系方式（可选）</view>
        <input
          v-model="form.contact"
          type="text"
          placeholder="手机号/微信号"
          placeholder-class="placeholder-text"
          class="input"
        />
      </view>

      <!-- 关联订单 -->
      <view v-if="form.orderId" class="form-group">
        <view class="label">关联订单</view>
        <view class="order-info">
          <text>订单号：{{ form.orderNo }}</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="button-group">
        <button class="btn-submit" @click="submitFeedback" :loading="loading">
          提交反馈
        </button>
        <button class="btn-cancel" @click="goBack">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
import { submitFeedback } from '@/api/feedback'
import MultiImageUploader from '@/components/MultiImageUploader.vue'

export default {
  components: { MultiImageUploader },
  data() {
    return {
      form: {
        type: null,
        content: '',
        images: [],
        contact: '',
        orderId: null,
        orderNo: null
      },
      typeIndex: 0,
      typeList: [
        { name: '商品问题', value: 1 },
        { name: '配送问题', value: 2 },
        { name: '服务问题', value: 3 },
        { name: '系统问题', value: 4 },
        { name: '功能建议', value: 5 },
        { name: '其他', value: 6 }
      ],
      loading: false,
      // 与 utils/request.js 的 BASE_URL 逻辑保持一致
      uploadUrl: process.env.NODE_ENV === 'development'
        ? 'http://localhost:8080/api/file/upload'
        : 'https://xindian66.xyz/api/file/upload'
    }
  },
  onLoad(options) {
    // 从订单详情页传入的参数
    if (options.orderId) {
      this.form.orderId = options.orderId
      this.form.orderNo = options.orderNo
    }
  },
  methods: {
    onTypeChange(e) {
      this.typeIndex = e.detail.value
      this.form.type = this.typeList[this.typeIndex].value
    },
    // 图片上传交由 MultiImageUploader 组件处理
    async submitFeedback() {
      // 参数校验
      if (!this.form.type) {
        uni.showToast({
          title: '请选择反馈类型',
          icon: 'none'
        })
        return
      }

      if (!this.form.content.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        })
        return
      }

      if (this.form.content.length < 5) {
        uni.showToast({
          title: '反馈内容最少5字',
          icon: 'none'
        })
        return
      }

      this.loading = true
      try {
        const data = await submitFeedback({
          type: this.form.type,
          content: this.form.content,
          images: this.form.images,
          contact: this.form.contact || null,
          orderId: this.form.orderId,
          orderNo: this.form.orderNo
        })

        // 拦截器已返回 data 即反馈对象
        if (data && data.id) {
          uni.showToast({ title: '反馈提交成功', icon: 'success' })
          setTimeout(() => uni.navigateBack(), 1200)
        }
      } catch (error) {
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 20rpx;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40rpx 30rpx;
  text-align: center;

  .title {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .subtitle {
    display: block;
    font-size: 28rpx;
    opacity: 0.9;
  }
}

.form {
  background: white;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 30rpx;

  &:last-of-type {
    margin-bottom: 0;
  }
}

.label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 12rpx;

  .required {
    color: #ff4444;
  }
}

.picker-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;

  .arrow {
    color: #999;
    font-size: 32rpx;
  }
}

.textarea {
  width: 100%;
  padding: 16rpx 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;
  min-height: 120rpx;
  box-sizing: border-box;

  &::placeholder {
    color: #999;
  }
}

.placeholder-text {
  color: #999;
}

.char-count {
  text-align: right;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12rpx;
}

.image-item {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background: #f5f5f5;
  border-radius: 8rpx;
  overflow: hidden;

  image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .delete-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 40rpx;
    height: 40rpx;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    line-height: 1;
  }
}

.image-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2rpx dashed #ddd;
  border-radius: 8rpx;
  background: #fafafa;
  cursor: pointer;

  .icon {
    font-size: 48rpx;
    color: #999;
    line-height: 1;
  }

  .text {
    font-size: 24rpx;
    color: #999;
    margin-top: 8rpx;
  }
}

.input {
  width: 100%;
  padding: 16rpx 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;
  box-sizing: border-box;

  &::placeholder {
    color: #999;
  }
}

.order-info {
  padding: 16rpx 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 8rpx;
  background: #f9f9f9;
  font-size: 28rpx;
  color: #666;
}

.button-group {
  margin-top: 40rpx;
  display: flex;
  gap: 16rpx;
}

.btn-submit {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;
  font-weight: 500;

  &:active {
    opacity: 0.9;
  }
}

.btn-cancel {
  flex: 1;
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 8rpx;
  padding: 16rpx;
  font-size: 28rpx;

  &:active {
    opacity: 0.8;
  }
}
</style>

